<template>
  <div class="listContent">
    <a-row :gutter="16">
      <a-col :span="12" :md="12" :lg="6" v-for="(item, index) in fileRender" :key="index">
        <a-card hoverable @click.stop="handleOpen(item)" class="myCard">
          <div  class="iconContent">
            <icon  :name="item.icon" :style="{ fontSize: '40px', color: item.color }"/>
          </div>
          <div class="resourceName">{{ item.resourceName }}</div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>

import http from "@/request";
import { downloadFile } from '@/utils/util'
import { defineProps, defineEmits, computed } from 'vue'
import Icon from "@/components/myIcon.vue"; 
import {
  DeleteOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
  fileList: {
    type: Array,
    required: true
  }
})

const fileType = [
  { name: '文件夹', color: '#fadb14', icon: 'FolderOpenOutlined', value: '1' },
  { name: '图片', color: '#722ed1', icon: 'FileImageOutlined', value: '2' },
  { name: '文档', color: '#87d068', icon: 'FileTextOutlined', value: '3' },
  { name: '视频', color: '#fa8c16', icon: 'VideoCameraOutlined', value: '4' },
  { name: '音频', color: '#eb2f96', icon: 'AudioOutlined', value: '5' },
  { name: '其他', color: '#f5222d', icon: 'FileOutlined', value: '6' },
]

const  emit  = defineEmits(['openFolder', 'refreshData'])

const fileRender = computed(() => {
  return props.fileList.map(item => {
    const { icon, color } = getItem(item.resourceType)
    return { ...item, icon, color }
  })
})


const getItem = value => {
  return fileType.find(item => item.value === value) || {}
}

const handleDownload = data => {
  // downloadFile(data.httpUrl, data.resourceName)
  window.open(data.httpUrl, "_blank");
}

const handleOpen = data => {
  if (data.resourceType === '1') {
    emit('openFolder', data)
  }else{
    handleDownload(data)
  }
}

</script>

<style scoped>
.listContent {
  margin-top: 40px;
}
.myCard{
  height: 164px;
  margin-bottom: 16px;
}
.fileContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
}

.title {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}

.resourceName {
  text-align: center;
  margin-top: 16px;
}

.iconContent {
  text-align: center;
}
</style>
